<template>
  <div class="body-box" style="position:relative">
    <window-title title="成绩列表"></window-title>
    <!-- 成绩表格 -->
    <div class="result-table-search">
      <el-form :model="formSearch" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="组别：">
              <template>
                <el-select size="mini" v-model="formSearch.group" filterable placeholder="请选择">
                  <el-option
                    v-for="item in groupList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </template>
            </el-form-item>
          </el-col>
          <el-col  :span="6">
            <el-form-item label="关键字：">
              <el-input size="mini" v-model="formSearch.keyWord" placeholder="请输入姓名/参赛号"></el-input>
            </el-form-item>
          </el-col>
          <el-col  :span="6">
            <el-form-item >
                <el-button size="mini" icon="el-icon-search" class="search_btn">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div>
      <el-table size="mini" border v-if="!list.data.length">
        <el-table-column type="index"></el-table-column>
        <el-table-column
          v-for="(item_label,key_label) in model_arr"
          :key="key_label"
          :label="item_label.name"
          :prop="item_label.value"
        ></el-table-column>
      </el-table>
      <el-table size="mini" :header-cell-style="{background:'#f8f8f8',color:'#333',borderRight:0}" border :data="list.data" v-else>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column
          v-for="(item_label,key_label) in model_arr"
          :key="key_label"
          :label="item_label.name"
          :prop="item_label.value"
        ></el-table-column>
          <!-- :prop="'form['+key_label+'].value'" -->
        <el-table-column label="操作" width="260px" fixed="right">
          <template slot-scope="item">
            <el-button size="mini" icon="el-icon-view" @click="seeCert(item.row.id)">预览</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-box">
      <div class="page-box-btn">
        <!-- <el-button size="mini" icon="el-icon-delete" type="danger">批量删除</el-button> -->
      </div>
      <el-pagination
        background
        small
        :current-page="list.current_page"
        :page-size="list.per_page"
        layout="total, prev, pager, next, jumper"
        :total="list.total"
        @current-change="changePage"
      ></el-pagination>
    </div>
 
    <!-- 证书预览 -->
    <el-dialog :visible.sync="cert_model" width="500px" title="证书预览" :append-to-body="true">
      <view-cert :cert_id="cert_id" :active_id="active_id" :team_id="tabs[activeName].id"></view-cert>
    </el-dialog>
 
  </div>
</template>

<script>
import windowTitle from "../../../components/unit/title.vue";
// import editCert from "./edit-cert.vue";
import viewCert from "./result-cert.vue";

export default {
  components: { windowTitle, viewCert },
  props: { active_id: {} },
  data() {
    return {
      edit_model: false,
      edit_form: [],
      edit_id: 0,
      search_info: "",
      dao_model: false,
      dao_loading: false,
      match_load: false,
      dao_load_txt: "文件上传中",
      tabs: [{ id: 0 }],
      activeName: "0",
      result_name: [
        { name: "user_name", memo: "姓名" },
        { name: "user_no", memo: "参赛号" },
        { name: "mobile", memo: "手机号" },
        { name: "sex", memo: "性别" },
        { name: "result_j", memo: "净成绩" },
        { name: "user_sort", memo: "排名" }
      ],
      formSearch: {
        group: "",
        keyWord: ""
      },
      groupList: [
        { label: "全部", value: "全部" },
        { label: "男子组", value: "男子组" },
        { label: "女子组", value: "女子组" },
        { label: "亲子组", value: "亲子组" }
      ],
      model_arr: [
        {
          name:'姓名',
          value:'name'
        },
         {
          name:'手机号',
          value:'phone'
        },
         {
          name:'参赛号',
          value:'enterNum'
        },
         {
          name:'性别',
          value:'gender'
        }, {
          name:'名次',
          value:'ranking'
        },
        {
          name:'净成绩',
          value:'grade'
        }
      ],
      select_arr: [],
      json_fields: {},
      json_data: [{}],
      img_url: "",
      list: {
        current_page: 1,
         per_page:10,
        total:20,
        data: [
          {
            name:'zs',
            phone:'16589658',
            enterNum:'2414',
            gender:'男',
            ranking:'1',
            grade:'1:30:15'
          }
        ]
      },
      cert_model: false,
      cert_id: 0,
      match_show: -1,
      is_have_model: false,
      copy_url: "https://www.baidu.com"
    };
  },
  mounted() {

  },
  methods: {
 
    //预览证书
    seeCert(id) {
      this.cert_model = true;
      this.cert_id = id;
    },
    //查询
    search() {
      this.list.current_page = 1;
      this.matchList();
    },
    //分页
    changePage(e) {
      this.list.current_page = e;
      this.matchList();
    },

  },
  watch: {
    tabs() {
      this.getMatchHead();
    },
    model_arr() {
      for (var i in this.model_arr) {
        this.json_fields[this.model_arr[i].name] = this.model_arr[i].name;
        this.json_data[0][this.model_arr[i].name] = "";
      }
    }
  }
};
</script>

<style>
.result-table-search {
  overflow: hidden;
  margin-top: 10px;
  margin-bottom: 10px;
}
.result-table-search > div {
  float: left;
}
.result-model {
  overflow: hidden;
}
.result-model-item {
  float: left;
  padding: 3px 10px;
  border: 1px solid #e1e1e1;
  margin-right: 20px;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
}
.model-close {
  border-radius: 50%;
  background: #8a70c6;
  color: #fff;
  height: 15px;
  width: 15px;
  text-align: center;
  line-height: 15px;
  /* position: absolute; */
  margin-left: 10px;
  font-size: 12px;
}
.result-set {
  margin-top: 20px;
  margin-bottom: 10px;
}
.page-box-btn {
  float: left;
}
.search_btn,.el-button:hover {
  background-color: #8a70c6;
  color: #ffffff;
  border-color: #8a70c6;
}
</style>